<!--  -->
<template>
  <div style="width: 100%;    display: flex; justify-content: center; align-items: flex-start; flex-direction: column;">
    <p-PageForm ref="qoriForm" :showHelp="false" v-bind="QueryOperatorRelatedInformation" :PEvent="PEvent"></p-PageForm>
    <a-button v-if="DisplayWizard" type="primary" @click="goto"> 查看截图流程指引 </a-button>
  </div>
</template>

<script>

const bczlConfig = (type)=>{
  let tipStr = '请上传<span style="color:red;">企业办税权限</span>截图'
  if(type=='2'){
    tipStr = '请上传<span  style="color:red;">任职受雇信息</span>截图'
  }
  return {
    dir: '/qsb/contract/', // 上传文件的地址
    model: "单文件", //   单文件(card1)  多文件(card3) 身份证(card1,card2)
    showBG: false, // 可选 表示是否需要显示身份证背景
    readonly:true,
    // required:true, // 是否校验
    tips:{
      card1: tipStr,
    },
    defaultFileList: {
      card1: {}, //{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png',name:''},
      // card2: {}, //{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:''},
      // card3: [], //[{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/task/settlementDocument/1687748548983_1234567890.xlsx',name:'1687748548983_1234567890.xlsx'},{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:''},{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png',name:''}],
    },
    fielConfig: {
      type: '', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
      size: 1, // 允许上传的文件个数  默认值为1
      singleFileSize: 10, //上传的单个文件大小 单位为 MB  默认值为1
    }
  }
}
const getFileVerification = ()=>{
  return [
    // { 'groupName':'经营者关联信息查询', suffixArr:['xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt'],errorMsg:'只允许上传 PDF,DOC,DOCX,XLS,XLSX 类型文件' }
  ]
}
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'QueryOperatorRelatedInformation',
  components: {},
  props: {
    value: {
      type: Object
    },
    defaultValue:{
      type:Object
    },
    disabled:{type:Boolean},
    // 当前组件模式  view 表示预览模式  edit  表示可编辑模式
    model:{type:String, default:'edit'},
    // 是否显示向导
    DisplayWizard:{type:Boolean, default:false},
    defaultLayout:{type:Object, default:()=>{ return {rowNum: 4, columnNum: 3, rowGap: "1px", rowHeight:'100px', coliumnGap: "0px", labelCol: { span: 1 }, wrapperCol: { span: 23 }}}}
  },
  data() {
    // 这里存放数据
    let validatePass2 = (self,fieldName,msg,rule, value, callback ) => {
      // console.log('#### 0==========>',fieldName,self.value);
      let url = self.formVAL[fieldName].card1.url || ''
      // console.log('#### 1==========>',fieldName,url,self);
      if (url === '') {
        callback(new Error(`请上传${msg}文件`));
      }  else {
        callback();
      }
    };
    return {
      formVAL:{},
      QueryOperatorRelatedInformation:{
        layout:{ rowNum: 4, columnNum: 3, rowGap: "1px", rowHeight:'100px', coliumnGap: "0px", labelCol: { span: 1 }, wrapperCol: { span: 23 },},
        formRules:{
          // 'entTaxPic':[
          //   // { required: true, message: '请上传文件', trigger: 'blur' },
          //   {required: true, validator: (...args)=>{validatePass2(this,'entTaxPic','企业办税权限截图',...args)} }
          // ],
          // 'entHirePic':[
          //   // { required: true, message: '请上传文件', trigger: 'blur' },
          //   { required: true,validator: (...args)=>{validatePass2(this,'entHirePic','任职受雇信息截图',...args)} }
          // ],
        },
        formDataList:[
          { enName:'entTaxPic', cnName:'', type:'UpLoad',value:{}, numRowsOccupied: 1, numColumnOccupied: 1 ,isChangeEvent:true,formItemAttr:{},itemAttr:{config: bczlConfig(1),extendedFileVerification:getFileVerification(), customRequestEvent:this.PUpLoadFileCustomRequestEvent}},
          { enName:'entHirePic', cnName:'', type:'UpLoad',value:{}, numRowsOccupied: 1, numColumnOccupied: 1 ,isChangeEvent:true,formItemAttr:{},itemAttr:{config: bczlConfig(2),extendedFileVerification:getFileVerification(), customRequestEvent:this.PUpLoadFileCustomRequestEvent}}
        ]
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    defaultLayout:{
      handler(val){
        // {userName2:{:'',name:''},userName3:{url:'',name:''}}
        if(!this.$IS.isNullOrUnDef(val) && !this.$IS.isEmpty(val)){
          this.QueryOperatorRelatedInformation.layout = Object.assign({},this.QueryOperatorRelatedInformation.layout,val)
        }
      },
      deep:true,
      immediate:true
    },
    defaultValue:{
      handler(val){
        // {userName2:{:'',name:''},userName3:{url:'',name:''}}
        if(!this.$IS.isNullOrUnDef(val) && !this.$IS.isEmpty(val)){
          this.QueryOperatorRelatedInformation.formDataList.forEach((item,index)=>{
            const {enName} = item
            let temp = {}
            if(!this.$IS.isNullOrUnDef(val[enName]) && !this.$IS.isEmpty(val[enName])){
              const {url, name, fileName} = val[enName]
              if(!this.$IS.isEmpty(url)){
                temp = {url,name:fileName||name}
              }
            }
            if(this.model=='view'){
              this.QueryOperatorRelatedInformation.formDataList[index].type = 'imgGroup'
              this.QueryOperatorRelatedInformation.formDataList[index].value = [temp]
            } else {
              this.QueryOperatorRelatedInformation.formDataList[index].type = 'UpLoad'
              this.QueryOperatorRelatedInformation.formDataList[index].itemAttr.config.defaultFileList.card1=temp
            }
          })
        }
      },
      deep:true,
      immediate:true
    },
    disabled:{
      handler(val){
        if(!this.$IS.isNullOrUnDef(val) && this.$IS.isBoolean(val)){
          this.QueryOperatorRelatedInformation.formDataList.forEach((item,index)=>{
            this.QueryOperatorRelatedInformation.formDataList[index].itemAttr.config.readonly= val
          })
        }
      },
      immediate:true,
      deep:true
    },
    model:{
      handler(val){
        if(!this.$IS.isNullOrUnDef(val) && !this.$IS.isEmpty(val)){
          if(val == 'view'){

          }
        }
      },
      immediate:true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    PEvent(type,item,data){
      console.log(type,item,data);
      if(type=='formChange'){
        this.upDateVal(data)
      }
      if("change"==type){
        this.formVAL[item] = data
      }
    },

    upDateVal(formVal){
      const tempVal = {}
      Object.keys(formVal).forEach(key=>{
        const {card1} = formVal[key]
        tempVal[key] = {url:card1.url,fileName:card1.name}
      })
      this.$emit('change.value', tempVal)
      this.$emit('change', tempVal);
      this.$emit('input', tempVal);
    },
    getValidator(bk){
     return new Promise((resolve, reject) => {
        this.$refs['qoriForm'].onSubmit((resVal)=>{
          console.log('#######################################################',resVal);
          resolve(resVal);
        })
        // // 异步操作
        // if (/* 成功条件 */) {
        //   resolve(value); // 操作成功时调用，将Promise的状态变为fulfilled
        // } else {
        //   reject(error); // 操作失败时调用，将Promise的状态变为rejected
        // }
    })

    },
    goto(){
      // this.$router.push({   path: '/enterprise/taxRealname', query: { bizId: 2}})
      const url = this.$router.resolve('/enterprise/taxRealname').href; // 使用路由解析目标URL
      window.open(`${url}?bizId=2`, '_blank'); // 在新页签中打开
    }
  },
  }
</script>
<style lang='less' scoped>
</style>

